extend layout

block main 
	style
		.panel-img{
			max-height: 200px;
			overflow: hidden;
			position: relative;
		}
		.panel-img img{
			float:left;
			width:100%;
			min-height:200px;
		}
		.panel-img h3{
			position: absolute;
			bottom: 0;
			background: rgba(0,0,0,0.4);
			display: block;
			width: 100%;
			padding: 8px;
			color: #fff;
			font-size:20px;
			margin: 0;
		}
	.row
		#colWidth.col-sm-4

	br
	#index.row(style="position:relative") 
	
	- var href = "/article/{id}?c="+category
	- if(typeof query.admin == 'string')
		- href = "/admin/articles/{id}/complete"
	.clearfix
	script(id="template",type="text/template")
		.col-sm-4
			.panel.panel-default
				a(href=href)
					.panel-img
						img.img-responsive.lazy(data-src='{cover}',src="{cover}")
						h3 {title}
					.panel-body
						p {digest}
						span {nickname}
						span.pull-right {datetime}
		.clearfix

	script.
		$(function(){
			$('#main #index').waterfall({ 
				itemCls: 'col-sm-4',
				gutterWidth: 10,
				gutterHeight: 10,    
				maxPage: 10,
				colWidth:$('#colWidth').width(),	 
				checkImagesLoaded: false, 
				dataType: 'json',  
				align:'left',
				path: function(page) {
					page--;
					return '/more?p='+page+'&c='+window.category;
				}, 
				callbacks: { 
					loadingFinished: function($loading, isBeyondMaxPage) {
						$('#main').trigger('scroll');
						if ( !isBeyondMaxPage ) {
							$loading.fadeOut();
						} else {
							$loading.remove();
						}
					},
					renderData: function (data, dataType) {
						var tpl, template;
							
						if ( dataType === 'json' ||  dataType === 'jsonp'  ) {
							var html = '';
							var template = $('#template').html();
							for(var i=0;i<data.articleList.length;i++){ 
								html += template.replace(/{(\w+?)}/ig,function($1,$2){
										return data.articleList[i][$2];
									})
							}
							return html;
						} else { 
							return data;
						}
					}
				}, 
			});
		})
		//- var page = 0;
		//- var cpage = 0;


		//- $('#content').scroll(function(ev){
		//- 		if (page === cpage){
		//- 			var scrollTop = $('#content').scrollTop()+window.innerHeight;
		//- 			if($('#hot').height()<scrollTop || $('#new').height()<scrollTop || $('#like').height()<scrollTop){
		//- 				cpage++;
		//- 				$.ajax({
		//- 					url:'/more?p='+cpage+'&c='+category,
		//- 					success:function(data){
		//- 						var html = ''
		//- 						var template = $('#template').html();
		//- 						for(var i=0;i<data.articleList.length;i++){
		//- 							html += template.replace(/{(\w+?)}/ig,function($1,$2){
		//- 								return data.articleList[i][$2];
		//- 							}
		//- 						}
		//- 						$('#main .row').append(html);
								
		//- 						if(data.articleList.length>0){
		//- 							page++;
		//- 						}
		//- 					}	
		//- 				})
		//- 			}
		//- 		}
		//- 	});